<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2022-01-04 13:12:52
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" id="container" style="height: 75%"></div>
</template>
<script>
import {Column} from '@antv/g2plot';

export default({
  data(){
    return{
      dataArr:[  {
    type: '7:00-8:00',
    sales: 400,
  },
  {
    type: '8:00-11:00',
    sales: 50,
  },
  {
    type: '11:00-12:30',
    sales: 500,
  },
  
  {
    type: '12:30-14:00',
    sales: 280,
  },
  {
    type: '14:00-17:00',
    sales: 80,
  },
  {
    type: '17:00-19:00',
    sales: 650,
  },
  {
    type: '19:00-21:00',
    sales: 100,
  },]
    }
  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){
     const columnPlot = new Column(this.$refs.left2_container, {
  data:this.dataArr,
  xField: 'type',
  yField: 'sales',
  tooltip:{
    fields:['ratio','sales'],
    domStyles:{
      'g2-tooltip':{
        padding:'5px',
        backgroudColor:'rgba(47,6,170,0.8)',
      }
    } 
  }
});
columnPlot.render();

    }
  }


  
})
</script>